<template>
    <div id="SortTable">
        <!-- 代码分三部分：
        第一部分：header（搜索部分）
        第二部分：body（医生排班信息展示部分）
        第三部分：footer（添加部分）-->
        <!-- 排班管理页面搜索部分 -->
        <header>
            <p>科室选择：</p>
            <!-- Selset选择器，可以利用搜索功能快速查找选项（输入关键字自动匹配） -->
            <el-select v-model="value" filterable placeholder="请选择科室">
                <!-- options为空数组，用于接收后端传过来的数据
                :value使用v-bind绑定数据中的id，方便后续查询功能调用id值进行匹配
                :label使用v-bind绑定数据中的deptName-->
                <el-option v-for="item in options" 
                    :key="item.id" 
                    :label="item.deptName" 
                    :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="search">查询</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="move">清空</el-button>
        </header>
        <body>
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                tooltip-effect="dark"
                height="500"
                style="width: 100%;font-size: 15px;"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="39"
                    align="center"
                    fixed>
                </el-table-column>
                <el-table-column
                    prop="realName"
                    label="医生名称"
                    width="86"
                    align="center">
                </el-table-column>
                <el-table-column
                    v-for="(i,index) in 14" :key="index" 
                    :label="'星期'+days[Math.ceil(i/2)]+(i%2 === 1 ? '上午':'下午')"
                    prop="week">
                    <template slot-scope="scope">
                        <el-checkbox
                        :checked="scope.row.week[index] == '1' ? true:false"
                        @change="changeWeek(index,scope.$index)">
                        </el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column
                    label="规则名称"
                    width="86"
                    align="center"
                    fixed="right">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.ruleName" placeholder=""></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                    label="删除状态"
                    width="86"
                    align="center"
                    fixed="right">
                    <template slot-scope="scope">
                        {{ scope.row.delMark == '1' ? '正常':'错误'}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="86"
                    align="center"
                    fixed="right">
                    <template slot-scope="scope">
                        <el-button
                        type="warning"
                        size="mini"
                        @click="changeSend(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </body>
        <footer style="display: flex;justify-content: center; margin-top: 20px;">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="规则名称">
                    <el-input  placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="添加用户">
                    <el-select v-model="chose" filterable placeholder="请选择用户">
                        <el-option v-for="(item,index) in choseData" 
                        :key="index" 
                        :label="item.realName" 
                        :value="item.id">
                </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-bottom">添加</el-button>
                    <el-button type="danger" icon="el-icon-bottom">新增排版规则</el-button>
                </el-form-item>
            </el-form>
        </footer>
    </div>
</template>

<script>
import { getListFun,updateRole,getUserRole } from '@/CommonJs/RequestApi';
export default {
    name: "SortTable",
    data() {
        return {
            options: [],
            value: '',
            tableData: [],
            days:{
                1:'一',
                2:'二',
                3:'三',
                4:'四',
                5:'五',
                6:'六',
                7:'日'
            },
            multipleSelection: [],
            choseData: [],
            chose: '',
        }
    },
    methods: {
        search(){
            getUserRole('scheduling/get_userRole',this.value).then(response => {
                console.log(response.data.data)
                this.tableData = response.data.data;
            })
        },
        move(){
            this.value=''
            getListFun('scheduling/get_AllUserRole').then(response=> {
                    console.log(response.data.data); 
                    this.tableData = response.data.data
                })
        },
        changeWeek(charindex,rowindex){
            var str = this.tableData[rowindex].week
            var newStr = this.returnStr(str,charindex)
            this.tableData[rowindex].week = newStr
            console.log(this.tableData[rowindex].week)
        },
        returnStr(oldStr,index){
            var newStr = oldStr.substring(0,index) + (oldStr[index] == 1 ? 0:1) + oldStr.substring(index+1,oldStr.lengh)
            return newStr
        },
        changeSend(data){
            updateRole('scheduling/updateRole',data).then(res=> {
                console.log(data);
                location.reload()
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    },
    mounted(){
        getListFun('scheduling/get_AllUserRole').then(response=> {
            console.log(response.data.data); 
            this.tableData = response.data.data
        })
        .catch(function (error) {
            console.log(error);
        });
        getListFun('scheduling/get_sc').then(response => {
            console.log(response.data.data);
            this.options = response.data.data
        })
        .catch(function (error) {
                    console.log(error);
        });
        getListFun('scheduling/get_AllUserRole').then(response=> {
            console.log(response.data.data); 
            this.choseData = response.data.data
        })
        .catch(function (error) {
            console.log(error);
        });
    }
}
</script>

<style scoped>
.selectTitle {
    width: 430px;
    margin: 0 auto;
}
#SortTable {
    background-color: #eee;
}
header {
    display: flex;justify-content: center;padding-top: 10px;margin-bottom: 20px;
}
p{
    display: flex;align-items: center;
}
footer{
    display: flex;
}
</style>